<!DOCTYPE html>
<html>
<head>
    <title>Area</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example">
    <div id="draggable"></div>
    <div id="droptarget"><div class="test1">Start dragging.</div><div class="test2">Start dragging.</div></div>

    <script>
        function draggableOnDragStart(e) {
            $("#draggable").addClass("hollow");

            $("#droptarget").html("<div class='test1'>(Drop here)</div><div class='test2'>(Drop here)</div>");
        }

        function droptargetOnDragEnter(e) {
            $(e.dropTarget).text("Now you can drop it.");
        }

        function droptargetOnDragLeave(e) {
            $(e.dropTarget).text("(Drop here)");
        }

        function droptargetOnDrop(e) {
            $(e.dropTarget).text("You did great!");
            $("#draggable").removeClass("hollow");
        }

        function draggableOnDragEnd(e) {
            var draggable = $("#draggable");

            if (!draggable.data("kendoDraggable").dropped) {
                // drag ended outside of any droptarget
                $("#droptarget").html("<div class='test1'>(Try again)</div><div class='test2'>(Try again)</div>");
            }

            draggable.removeClass("hollow");
        }

        $(document).ready(function() {
            $("#draggable").kendoDraggable({
                hint: function() {
                    return $("#draggable").clone();
                },
                dragstart: draggableOnDragStart,
                dragend: draggableOnDragEnd
            });

            $("#droptarget").kendoDropTargetArea({
                filter: ".test1, .test2",
                dragenter: droptargetOnDragEnter,
                dragleave: droptargetOnDragLeave,
                drop: droptargetOnDrop
            });
        });
    </script>

    <style scoped>
        #draggable
        {
            cursor: pointer;
            position: absolute;
            top: 80px;
            left: 30px;
            border: 1px solid #ff8000;
            width: 78px;
            height: 78px;
            border-radius: 37px;
            box-shadow: 2px 0 10px #9d9d9d;
            background: #ffcc00 url(../../content/web/dragdrop/draggable.png) 50% 50% no-repeat;
            background: url(../../content/web/dragdrop/draggable.png) 50% 50% no-repeat, -moz-linear-gradient(top, #ffcc00 0%, #ff8000 100%);
            background: url(../../content/web/dragdrop/draggable.png) 50% 50% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff8000));
            background: url(../../content/web/dragdrop/draggable.png) 50% 50% no-repeat, -webkit-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
            background: url(../../content/web/dragdrop/draggable.png) 50% 50% no-repeat, -o-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
            background: url(../../content/web/dragdrop/draggable.png) 50% 50% no-repeat, -ms-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
            background: url(../../content/web/dragdrop/draggable.png) 50% 50% no-repeat, linear-gradient(top, #ffcc00 0%,#ff8000 100%);
        }

        #draggable.hollow
        {
            cursor: default;
            background: #ececec;
            border-color: #cbcbcb;
        }

        #droptarget,
        .test1, .test2
        {
            border: 1px solid #959595;
            height: 198px;
            font-size: 18px;
            border-radius: 37px;
            text-align: center;
            line-height: 198px;
            color: #a1a1a1;
            text-shadow: 0 1px 0 #fff;
            margin: 0 0 30px 215px;
            cursor: default;
            vertical-align: middle;

            background: #dddddd;
            background: -moz-linear-gradient(top, #dddddd 0%, #c1c1c1 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#c1c1c1));
            background: -webkit-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
            background: -o-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
            background: -ms-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
            background: linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
        }

        .test1, .test2
        {
            vertical-align: middle;
            display: inline-block;
            width: 220px;
            height: 100px;
            line-height: 100px;
            margin: 0 10px 0;
        }

        *+html .test1,
        *+html .test2
        {
            margin-top: 50px;
            display: inline;
            zoom: 1;
        }

        #example
        {
            background: url(../../content/web/dragdrop/drag-clue.png) no-repeat 140px 102px;
        }

        #exampleTitle
        {
            color: #000;
        }
    </style>
</div>

</body>
</html>
